import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs } from 'antd';
// import { Dispatch, AnyAction } from 'redux';
// import styles from './index.css';
import sty from '../statistics/index.css';
import Devicelog from './devicelog';
import Platformlog from './platformlog';
import { isMenuVisible } from './../../utils/utils';

import { Dispatch, AnyAction } from 'redux';
const { TabPane } = Tabs;

interface JournalManageProps {
  dispatch: Dispatch<AnyAction>;
}

@connect()
class JournalManage extends Component<JournalManageProps> {
  constructor(props: JournalManageProps) {
    super(props);
  }
  // tabArr: [
  //   { idx: '0', menuId: '6', type: 'device/initDeviceManger' },
  //   { idx: '1', menuId: '7', type: 'device/deviceClollectionList' },
  //   { idx: '2', menuId: '8', type: 'deviceWarn/deviceWarnedList' },
  // ],
  state = {
    tabArr: [
      { idx: '0', menuId: 'iot:deviceLog:view', type: 'journalManageMode/logDeviceStatisVo', search: 'iot:deviceLog:list' },
      { idx: '1', menuId: 'iot:operLog:view', type: 'journalManageMode/operLogStatisVo',searcg:'iot:operLog:statistical' },
      // { idx: '2', menuId: '8', type: 'deviceWarn/deviceWarnedList' },
    ],
    activeTabArr: [],
    activeIdx: '0',
    activeTab: '',
  };
  componentWillMount() {
    let arr = [];
    this.state.tabArr.forEach((e: any) => {
      if (isMenuVisible(e.menuId)) {
        arr.push(e);
      }
    });
    this.setState({ activeTabArr: arr }, () => {
      this.setState({
        activeIdx: this.state.activeTab
          ? this.state.activeTab
          : this.state.activeTabArr.length && this.state.activeTabArr[0].idx,
      });
    });
  }
  handleTabChange = (type: string) => {
    console.log(type);
    const { dispatch } = this.props;
    this.setState({
      activeIdx: type,
    });
    isMenuVisible(this.state.tabArr[+type].search) && dispatch({ type: this.state.tabArr[+type].type });
  };

  render() {
    return (
      <div className={sty.container}>
        <Tabs onChange={this.handleTabChange} activeKey={this.state.activeIdx} type="card">
          {isMenuVisible('iot:deviceLog:view') && ( 
            <TabPane tab="设备日志" key="0">
              <Devicelog />
            </TabPane>
          )}
          {isMenuVisible('iot:operLog:view') && (
            <TabPane tab="平台日志" key="1">
              <Platformlog />
            </TabPane>
          )}
        </Tabs>
      </div>
    );
  }
}

export default JournalManage;
